<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l text-grey"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l text-grey"></view>

        <block v-if="isAdmin && isLoad">
            <!-- parse <include src="admin_meet_record_tpl.wxml"/> -->
            <block>
                <view :class="'main-' + oprt">
                    <view class="table margin-bottom sticky1" style="width: 100%">
                        <view class="table-top">
                            <view class="table-form">
                                <view class="item">
                                    <view class="title">起始日期：</view>
                                    <cmpt-picker-time
                                        mode="day"
                                        style="flex: 1"
                                        :startYear="2022"
                                        :endYear="2028"
                                        :item="searchDayStart"
                                        @select="url($event, { type: 'picker', item: 'searchDayStart' })"
                                        data-type="picker"
                                        data-item="searchDayStart"
                                    >
                                        <view class="content">
                                            {{ searchDayStart }}
                                            <text v-if="!searchDayStart" class="margin-left-xxs icon-calendar"></text>
                                        </view>
                                    </cmpt-picker-time>
                                </view>

                                <view class="item">
                                    <view class="title">结束日期：</view>
                                    <cmpt-picker-time
                                        mode="day"
                                        style="flex: 1"
                                        :startYear="2022"
                                        :endYear="2028"
                                        :item="searchDayEnd"
                                        @select="url($event, { type: 'picker', item: 'searchDayEnd' })"
                                        data-type="picker"
                                        data-item="searchDayEnd"
                                    >
                                        <view class="content">
                                            {{ searchDayEnd }}
                                            <text v-if="!searchDayEnd" class="margin-left-xxs icon-calendar"></text>
                                        </view>
                                    </cmpt-picker-time>
                                </view>
                                <view class="oprt">
                                    <view @tap="bindSearchTodayTap" hover-class="button-hover" class="min-btn margin-right-xs">今日</view>
                                    <view @tap="bindSearchTomorrowTap" hover-class="button-hover" class="min-btn margin-right-xs">明日</view>
                                    <!-- <view bindtap="bindSearchClearTap" hover-class="button-hover" class="margin-right-xs">清空</view> -->
                                    <view @tap="bindSearchTap" hover-class="button-hover" class="submit margin-right-xs">搜索</view>
                                </view>
                            </view>
                            <!-- 表格头 start -->
                            <view class="thead border">
                                <view class="td" style="width: 220rpx">时段</view>
                                <view class="td" style="width: 230rpx">已预约/名额</view>
                                <view class="td" style="width: 150rpx">取消</view>
                                <view class="td full">查看</view>
                            </view>
                            <!-- 表格头 end -->
                        </view>

                        <!-- 表格体 start -->
                        <view class="tbody" v-for="(item, index) in daysSet" :key="index">
                            <view class="line">
                                <text :class="(item.day < now ? 'text-grey' : '') + ' ' + (item.day == now ? 'text-blue text-bold' : '')">
                                    {{ item.day }}
                                    <text v-if="item.day < now" class="margin-left-xxs">(已过期)</text>
                                    <text v-if="item.day == now" class="margin-left-xxs">(今日)</text>
                                </text>
                            </view>

                            <view class="tr stripe border" v-for="(itm, idx) in item.times" :key="idx">
                                <view class="td" style="width: 220rpx">{{ itm.start }}～{{ itm.end }}</view>

                                <view class="td" style="width: 230rpx">
                                    <text :class="itm.stat.succCnt ? 'text-bold' : ''">{{ itm.stat.succCnt }}</text>
                                    <text class="margin-right-xxxs margin-left-xxxs">/</text>
                                    {{ itm.isLimit ? itm.limit : '不限' }}
                                </view>

                                <view class="td text-grey" style="width: 150rpx">{{ itm.stat.cancelCnt + itm.stat.adminCancelCnt }}</view>

                                <view
                                    @tap="url"
                                    :data-url="
                                        '../join/' +
                                        oprt +
                                        '_meet_join?meetId=' +
                                        meetId +
                                        '&mark=' +
                                        itm.mark +
                                        '&dayidx=' +
                                        index +
                                        '&timeidx=' +
                                        idx +
                                        '&title=' +
                                        titleEn +
                                        '&time=' +
                                        (item.day + ' ' + itm.start + '-' + itm.end)
                                    "
                                    class="td full"
                                >
                                    名单
                                    <text class="icon-right"></text>
                                </view>
                            </view>
                        </view>

                        <view v-if="daysSet === null" class="no-data">数据加载中...</view>
                        <view v-if="daysSet.length == 0" class="no-data">没有数据哦~</view>
                    </view>
                </view>

                <!-- top begin -->
                <button v-if="topShow" class="btn-fixed bg-gray text-gray btn-top" @tap="bindTopTap" style="bottom: 100rpx"><text class="icon-top"></text></button>
                <!-- top END. -->
            </block>
        </block>
    </view>
</template>

<script>
import cmptPickerTime from '@/cmpts/public/picker_time/picker_time_cmpt';
const AdminBiz = require('@/utils/comm/biz/admin_biz.js');
const pageHelper = require('@/utils/helper/page_helper.js');
const behavior = require('@/utils/meet/admin_meet_record_bh.js');
export default {
    components: {
        cmptPickerTime
    },
    data() {
        return {
            isLoad: '',
            isAdmin: '',
            oprt: 'admin',
            searchDayStart: '',
            searchDayEnd: '',
            daysSet: [],
            now: 0,

            itm: {
                start: '',
                end: '',

                stat: {
                    succCnt: false,
                    cancelCnt: '',
                    adminCancelCnt: ''
                },

                mark: ''
            },

            meetId: '',
            titleEn: '',
            topShow: 0
        };
    },
    mixins: [behavior],
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        if (!pageHelper.getOptions(this, options, 'meetId')) {
            return;
        }
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        this._init(options);
    },
    methods: {
        // url(e, _dataset) {
        //     /* ---处理dataset begin--- */
        //     this.handleDataset(e, _dataset);
        //     /* ---处理dataset end--- */
        //     pageHelper.url(e, this);
        // },

        // bindSearchTodayTap() {
        //     console.log('占位：函数 bindSearchTodayTap 未声明');
        // },

        // bindSearchTomorrowTap() {
        //     console.log('占位：函数 bindSearchTomorrowTap 未声明');
        // },

        // bindSearchTap() {
        //     console.log('占位：函数 bindSearchTap 未声明');
        // },

        // bindTopTap() {
        //     console.log('占位：函数 bindTopTap 未声明');
        // }
    }
};
</script>
<style>
@import './admin_meet_record.css';
</style>
